The Ultimate Flask Front

Table of Contents

Let’s look at the small, yet powerful JavaScript UI library ReactJS in action, as we build a basic web application. This app is powered by Python 3 and the Flask framework in the back-end and React in the front. In addition, we will use gulp.js (task runner), bower (front-end package manager), and Browserify (JavaScript dependency bundler).

Free Bonus: Click here to get access to a free Flask + Python video tutorial that shows you how to build Flask web app, step-by-step.

Updates:

React is a library, not a framework. Unlike client-side MVC frameworks, like Backbone, Ember, and AngularJS, it makes no assumptions about your tech stack so you can easily integrate it into a new or legacy code base. It’s often used to manage specific areas of an application’s UI, rather than the entire UI.

React’s only concern is with the user interface (the ‘V’ in MVC), which is defined by a hierarchy of modular view Components that couple static markup with dynamic JavaScript. If you’re familiar with Angular, these Components are similar to Directives. Components use an XML-like syntax called JSX that transcompiles down to vanilla JavaScript.

Since Components are defined in a hierarchical order, you don’t have to re-render the entire DOM when a state changes. Instead, it uses a Virtual DOM that only re-renders the individual Components after the state has changed, at blazingly fast speeds!

Be sure to review the Getting Started guide and the excellent Why did we build React? blog post from the official React documentation.

Let’s start with what we know: Flask.

Download the boilerplate code from the repository, extract the files, create then activate a virtualenv, and install the requirements:

Finally, let’s run the app and start the show:

Let’s look at a simple Component to get our feet wet.

We are going to add this JSX script to our hello.html. Take a minute to check it out.

What’s going on?

Refer to the official docs for more info.

What’s next? Well, we need to “transform”, or transcompile, the JSX to vanilla JavaScript. This is easy. Update hello.html like so:

Here we addded the helloWorld Component to the template along with the following scripts-

-the latter of which, JSXTransformer.js, searches for tags with type="text/jsx" and then “transforms” the JSX syntax into vanilla JavaScript within the browser. Please note that this tool is deprecated and has been replaced by Browserify, which we will set up later on.

Notice how we did not add jQuery since it is not required for React.

That’s it. Run the Flask development server and check out the results in the browser at http://localhost:5000/hello.

Instead of using the pre-built JavaScript files, from the CDN, let’s use bower to better (IMHO) manage those dependencies. Bower is a powerful package manager for front-end dependencies - i.e., jQuery, Bootstrap, React, Angular, Backbone.

Make sure you have Node and npm installed before moving on.

Install bower with npm:

npm is another package manager used to manage Node modules. Unlike PyPI/pip, the default behavior of npm is to install dependencies at the local level. The -g flag is used to override that behavior to install bower globally since you will probably use bower for a number of projects.

Bower uses a file called bower.json to define project dependencies, which is similar to a requirements.txt file. Run the following command to interactively create this file:

Just accept the defaults for now. Once done, your bower.json file should look something like this:

For more on the bower.json and the init command, check out the official documentation.

Like the bower.json file, npm utilizes a similar file, called package.json to define project-specific dependencies. You can also create it interactively:

Againm, accept the defaults:

Now, let’s add bower to the npm dependency file:

Along with the bower.json file, we can define configuration settings in a file called .bowerrc. Create the file now within the project root. Your project structure should now look like this:

The standard behavior is for bower to install packages in a directory called “bower_components” in the project root. We need to override this behavior since Flask needs access to the packages within the static directory. Thus, add the following JSON to the file so that bower automatically installs the file in the correct directory:

Let’s install Bootstrap and React. This can be done in one of two ways:

Since we (err, I) know the versions already, let’s use the second method. Update the bower.json file like so:

And then run bower install:

You should now see the “project/static/bower_components” directory.

Now you can pull in all the required dependencies with pip, npm, and bower after cloning the repo:

Update the React scripts in hello.html:

Test out the app to make sure it still works.

With the tools set up, we’ll move back to React and develop a more robust app in the second part. If you’d like to see how to set up a complete Python + Flask web app from scratch, be sure to check out Build a JavaScript Front End for a Flask API, as well as this video series:

Free Bonus: Click here to get access to a free Flask + Python video tutorial that shows you how to build Flask web app, step-by-step.

🐍 Python Tricks 💌

Get a short & sweet Python Trick delivered to your inbox every couple of days. No spam ever. Unsubscribe any time. Curated by the Real Python team.

About Michael Herman

Michael is a software engineer and educator who lives and works in Denver, CO.

Each tutorial at Real Python is created by a team of developers so that it meets our high quality standards. The team members who worked on this tutorial are:

Aldren

Master Real-World Python Skills With Unlimited Access to Real Python

Join us and get access to thousands of tutorials, hands-on video courses, and a community of expert Pythonistas:

Level Up Your Python Skills »

Master Real-World Python SkillsWith Unlimited Access to Real Python

Join us and get access to thousands of tutorials, hands-on video courses, and a community of expert Pythonistas:

Level Up Your Python Skills »

What Do You Think?

What’s your #1 takeaway or favorite thing you learned? How are you going to put your newfound skills to use? Leave a comment below and let us know.

Commenting Tips: The most useful comments are those written with the goal of learning from or helping out other students. Get tips for asking good questions and get answers to common questions in our support portal.

Keep Learning

Related Topics: advanced flask front-end web-dev

Continue »

Already have an account? Sign-In